<template>
  <view class="page">
    <!-- 顶部设备信息卡片 -->
    <view class="header">
      <text style="margin-left: 10rpx">更多设备信息</text>
      <view class="device-card">
        <view class="device-info">
          <view class="device-icon">
            <image src="@/static/images/51276e00a4890f11936fcc00b81e6367.png" mode="aspectFill"></image>
          </view>
          
          <view class="device-details">
            <text class="device-name">{{ deviceName }}</text>
<!--            <text class="product-info">产品百科</text>-->
          </view>
        </view>
      </view>
      
      <!-- 独立的设备网络状态板块 -->
      <view class="network-status-card" @click="showNetworkInfo">
        <view class="network-status-content">
          <text class="info-label">设备网络</text>
          <text class="info-value" :class="{ 'offline': isOffline }">{{ networkStatus }}</text>
          <uni-icons type="right" size="14" color="#999" />
        </view>
      </view>
    </view>

    <!-- 设备详细信息列表 -->
    <view class="info-list">
      <view class="info-card">
        <!-- 房间信息 -->
        <view class="info-item">
          <view class="info-content">
            <text class="info-label">房间</text>
            <text class="info-value">{{ roomName }}</text>
          </view>
          <uni-icons type="right" size="14" color="#999" style="margin-right: 20rpx" />
        </view>

        <!-- 设备名称 -->
        <view class="info-item" @click="showRenameDialog">
          <view class="info-content">
            <text class="info-label">设备名称</text>
            <text class="info-value">{{ customName }}</text>
          </view>
          <uni-icons type="right" size="14" color="#999" style="margin-right: 20rpx" />
        </view>

        <!-- 更换图标 -->
        <view class="info-item" @click="changeIcon">
          <view class="info-content">
            <text class="info-label">更换图标</text>
          </view>
          <uni-icons type="right" size="14" color="#999" style="margin-right: 20rpx" />
        </view>

        <!-- 绑定手机号 -->
        <view class="info-item">
          <view class="info-content">
            <text class="info-label">绑定人手机号</text>
            <text class="info-value">{{ bindingUserAccount }}</text>
          </view>
          <uni-icons type="right" size="14" color="#999" style="margin-right: 20rpx" />
        </view>
      </view>

      <!-- 软件信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">软件</text>
        </view>
        <view class="info-item">
          <view class="info-content">
            <text class="info-label">软件版本</text>
            <text class="info-value">{{ pluginVersion }}</text>
          </view>
        </view>
      </view>

      <!-- 硬件信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">硬件</text>
        </view>
        <view class="info-item">
          <view class="info-content">
            <text class="info-label">设备ID</text>
            <text class="info-value">{{ deviceId }}</text>
          </view>
        </view>
        <view class="info-item">
          <view class="info-content">
            <text class="info-label">生产时间</text>
            <text class="info-value">{{ productionDate }}</text>
          </view>
        </view>
        <view class="info-item">
          <view class="info-content">
            <text class="info-label">SDK固件版本</text>
            <text class="info-value">{{ sdkVersion }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 网络信息弹窗 -->
    <uni-popup ref="networkInfoPopup" type="dialog">
      <view class="network-info-popup">
        <view class="popup-header">
          <text class="popup-title">网络信息</text>
        </view>
        <view class="popup-content">
          <view class="info-row">
            <text class="info-key">WiFi名称</text>
            <text class="info-value">{{ networkInfo.networkType }}</text>
          </view>
          <view class="info-row">
            <text class="info-key">WiFi路由器MAC地址</text>
            <text class="info-value">{{ networkInfo.signalStrength }}</text>
          </view>
          <view class="info-row">
            <text class="info-key">设备IP地址</text>
            <text class="info-value">{{ networkInfo.ipAddress }}</text>
          </view>
          <view class="info-row">
            <text class="info-key">设备MAC地址</text>
            <text class="info-value">{{ networkInfo.macAddress }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="confirm-btn" @click="closeNetworkInfo">确定</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 重命名弹窗 -->
    <uni-popup ref="renamePopup" type="dialog">
      <view class="rename-popup">
        <view class="popup-header">
          <text class="popup-title">重命名</text>
        </view>
        <view class="popup-content">
          <view class="input-wrapper">
            <input 
              class="rename-input" 
              placeholder="请输入设备名称" 
              :value="inputClearValue"
              @input="onInput" />
            <uni-icons 
              v-if="showClearIcon" 
              type="clear" 
              size="20" 
              @click="clearInput" 
              class="clear-icon" />
          </view>
        </view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="cancelRename">取消</button>
          <button class="confirm-btn" @click="confirmRename">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {_getDetail, _changename} from '@/service/equip.js'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'

export default {
  components: {
    uniPopup
  },
  data() {
    return {
      // 设备信息
      deviceName: '未知设备',
      deviceIcon: '/static/images/device-icon.png',
      roomName: '',
      networkStatus: '',
      isOffline: false,
      customName: '',
      productionDate: '',
      bindingUserAccount: '',
      bindingTime: '',
      pluginVersion: '',
      deviceId: '',
      sdkVersion: '',
      serialnum_equip: '',
      // 重命名相关
      inputClearValue: '',
      showClearIcon: false,
      // 网络信息弹窗数据
      networkInfo: {
        networkType: '',
        signalStrength: '',
        ipAddress: '',
        macAddress: ''
      }
    }
  },
  onLoad(options) {
    // 获取传递的设备ID
    const { serialnum_equip } = options;
    this.loadDeviceInfo(serialnum_equip);
    this.serialnum_equip = serialnum_equip;
    console.log(serialnum_equip);
  },
  methods: {
    async loadDeviceInfo(serialnum) {
      try {
        // 调用API获取设备详细信息
        const res = await _getDetail({ serialnum_equip: serialnum });

        if (res && res.data) {
          console.log(res.data);
          const deviceInfo = res.data;
          this.deviceName = deviceInfo.name_equip || '未知设备';
          this.roomName = deviceInfo.name_room || '未分配';
          this.networkStatus = this.getNetworkStatusText(deviceInfo.networkStatus);
          this.isOffline = deviceInfo.networkStatus === 'DISCONNECT';
          this.customName = deviceInfo.name_equip || '未设置';
          this.pluginVersion = deviceInfo.pluginVersion || '1.0.0';
          this.deviceId = deviceInfo.serialnum_equip || serialnum;
          this.sdkVersion = deviceInfo.sdkVersion || '1.0.0';
          this.productionDate = deviceInfo.productiondate_equip || '未知';
          this.bindingUserAccount = deviceInfo.cbindinguseraccount_equip || '未知';
          this.bindingTime = deviceInfo.bindingtime_equip || '未知';
          
          // 设置真实的网络信息
          this.networkInfo.networkType = deviceInfo.ssid || 'Wi-Fi';
          this.networkInfo.signalStrength = deviceInfo.bssid || '良好';
          this.networkInfo.ipAddress = deviceInfo.ip_address || '192.168.1.100';
          this.networkInfo.macAddress = deviceInfo.mac_address || '00:1B:44:11:3A:B7';
        } else {
          // 设置默认值
          this.deviceName = '未知设备';
          this.roomName = '未分配';
          this.networkStatus = '未知状态';
          this.customName = '未设置';
          this.pluginVersion = '1.0.0';
          this.deviceId = serialnum;
          this.sdkVersion = '1.0.0';
          this.productionDate = '未知';
          this.bindingUserAccount = '未知';
          this.bindingTime = '未知';
          
          // 设置默认网络信息
          this.networkInfo.networkType = 'Wi-Fi';
          this.networkInfo.signalStrength = '良好';
          this.networkInfo.ipAddress = '192.168.1.100';
          this.networkInfo.macAddress = '00:1B:44:11:3A:B7';
        }
      } catch (error) {
        console.error('获取设备信息失败:', error);
      }
    },
    getNetworkStatusText(status) {
      const statusMap = {
        'DISCONNECT': '设备离线',
        'CONNECTED': '在线',
        'RUN': '运行中',
        'ON': '已开机',
        'OFF': '已关机',
        'STOP': '停止中',
        'PULSE': '待机'
      };
      return statusMap[status] || '未知状态';
    },
    goBack() {
      uni.navigateBack();
    },
    changeIcon() {
      // 更换图标功能
      uni.showToast({
        title: '更换图标功能待实现',
        icon: 'none'
      });
    },
    // 显示网络信息弹窗
    showNetworkInfo() {
      this.$refs.networkInfoPopup.open();
    },
    // 关闭网络信息弹窗
    closeNetworkInfo() {
      this.$refs.networkInfoPopup.close();
    },
    // 显示重命名弹窗
    showRenameDialog() {
      this.inputClearValue = this.customName;
      this.showClearIcon = !!this.inputClearValue;
      this.$refs.renamePopup.open();
    },
    // 输入框输入事件
    onInput(event) {
      this.inputClearValue = event.detail.value;
      this.showClearIcon = !!event.detail.value;
    },
    // 清除输入框
    clearInput() {
      this.inputClearValue = '';
      this.showClearIcon = false;
    },
    // 取消重命名
    cancelRename() {
      this.$refs.renamePopup.close();
      this.inputClearValue = '';
      this.showClearIcon = false;
    },
    // 确认重命名
    async confirmRename() {
      if (this.inputClearValue === '') {
        uni.showToast({
          title: '设备名称不能为空',
          icon: 'none'
        });
        return;
      }
      
      try {
        const res = await _changename({
          serialnum_equip: this.serialnum_equip,
          name_equip: this.inputClearValue
        });
        
        if (res.flag) {
          // 更新设备名称
          this.customName = this.inputClearValue;
          this.deviceName = this.inputClearValue;
          
          // 关闭弹窗
          this.$refs.renamePopup.close();
          
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: res.message || '修改失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '修改失败',
          icon: 'none'
        });
        console.error('修改设备名称失败:', error);
      }
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 40rpx;
}

.header {
  //background: linear-gradient(180deg, #44cdbd 0%, #239f97 100%);
  padding: 20rpx 32rpx 0rpx 32rpx;
}

.device-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 32rpx;
  margin-top: 20rpx;
  //box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  //
  //&:active {
  //  background-color: #ffffff;
  //}
  
  .device-info {
    display: flex;
    align-items: center;
    
    .device-icon {
      width: 120rpx;
      height: 120rpx;
      //border-radius: 60rpx;
      overflow: hidden;
      border: 4rpx solid #fff;
      //box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      margin-right: 24rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .device-details {
      flex: 1;
      
      .device-name {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .product-info {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

.network-status-card {
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 32rpx;
  //box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:active {
    background-color: #f0f0f0;
  }
  
  .network-status-content {
    display: flex;
    align-items: center;
    
    .info-label {
      font-size: 30rpx;
      color: #333;
      margin-right: 20rpx;
    }
    
    .info-value {
      flex: 1;
      font-size: 28rpx;
      color: #2e9d91;
      font-weight: 500;
      text-align: right;
      margin-right: 30rpx;
      
      &.offline {
        color: #ff0000;
      }
    }

  }
}

.info-list {
  margin: 32rpx;
  
  .info-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
    margin-bottom: 20rpx;
    
    .card-header {
      padding: 24rpx 0 16rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .card-title {
        font-size: 28rpx;
        color: #999;
      }
    }

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 0;
      margin: 0 -32rpx;
      border-bottom: 1rpx solid #f5f5f5;
      transition: background-color 0.25s;
      
      &:active {
        background-color: #f0f0f0;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-content {
        display: flex;
        //flex-direction: column;
        flex: 1;
        margin-left: 32rpx;
        
        .info-label {
          font-size: 30rpx;
          color: #333;
          //margin-bottom: 8rpx;
        }
        
        .info-value {
          margin-left: auto;
          margin-right: 32rpx;
          font-size: 26rpx;
          color: #999;
        }
      }
      
      .change-icon .info-value {
        color: #44cdbd;
      }
      
      .info-value.offline {
        color: #ff0000;
      }
    }
    
    .info-item:last-child {
      border-bottom: none;
    }
  }
}

// 网络信息弹窗样式
.network-info-popup {
  width: 80vw;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  
  .popup-header {
    padding: 32rpx;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .popup-content {
    padding: 32rpx;
    
    .info-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-key {
        font-size: 28rpx;
        color: #666;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
  
  .popup-footer {
    padding: 32rpx;
    text-align: center;
    border-top: 1rpx solid #f0f0f0;
    
    .confirm-btn {
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #44cdbd;
      border-radius: 10rpx;
      color: #fff;
      font-size: 30rpx;
      border: none;
    }
  }
}

.rename-popup {
  width: 80vw;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  
  .popup-header {
    padding: 32rpx;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .popup-content {
    padding: 32rpx;
    
    .input-wrapper {
      display: flex;
      align-items: center;
      border: 1rpx solid #ddd;
      border-radius: 8rpx;
      padding: 10rpx 16rpx;
      
      .rename-input {
        flex: 1;
        font-size: 28rpx;
        padding: 10rpx 0;
      }
      
      .clear-icon {
        margin-left: 10rpx;
      }
    }
  }
  
  .popup-footer {
    padding: 20rpx 32rpx 32rpx;
    display: flex;
    gap: 20rpx;
    
    .cancel-btn,
    .confirm-btn {
      flex: 1;
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 10rpx;
      font-size: 30rpx;
      border: none;
    }
    
    .cancel-btn {
      background-color: #f0f0f0;
      color: #666;
    }
    
    .confirm-btn {
      background-color: #44cdbd;
      color: #fff;
    }
  }
}
</style>